<template>
  <!--查询字段-->
  <find-kind :columnId="columnId"></find-kind>
  <span >
    <!--一个查询字段-->
    <component
      style="float:left;width: 140px;"
      :is="findItemDict[controlType]"
      :model="state.findModel[columnId]"
      v-bind="state.itemMeta[columnId]"
      colName="value"
    >
    </component>
  </span>
  <span v-if="state.findModel[columnId].useKind >= 17 && state.findModel[columnId].useKind <= 19">
    <!--两个查询字段-->
    <span style="float:left">&nbsp; - &nbsp;</span>
    <component
      style="float:left;width: 140px;"
      :is="findItemDict[controlType]"
      :model="state.findModel[columnId]"
      v-bind="state.itemMeta[columnId]"
      colName="valueEnd"
    >
    </component>
  </span>
</template>

<script lang="ts">
  import { defineComponent, ref, watch } from 'vue'
  import { getFindState } from '../state/state-find'
  import { findItemDict } from './_map-find-item'
  // 查询方式
  import findKind from './s-findkind.vue'
  
  /**
   * 查询字段，引入查询方式，设置查询字段对应的控件
   */
  export default defineComponent({
    name: 'nf-el-find-item',
    components: {
      findKind 
    },
    props: {
      columnId: {
        type: [Number, String],
        required: true
      }
    },
    setup(props, context) {
      const state = getFindState()

      const defControlType = state.itemMeta[props.columnId]?.formItemMeta?.controlType ?? 101

      const controlType = ref<number>(defControlType)

      // 切换控件类型
      watch(() => state.findModel[props.columnId].useControlKind, (kind: number) => {
        controlType.value = kind
      })

      return {
        controlType,
        findItemDict,
        state
      }
    }
  })
</script>